<!DOCTYPE html>
<html>
   <head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">	
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>登录页面</title>
      <!-- 新 Bootstrap 核心 CSS 文件 -->
     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
     <!-- 可选的Bootstrap主题文件（一般不使用） -->
     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
     <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
      <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	  <style>
	    div.head{
		  position:-webkit-sticky;
          position:sticky;
		  width:100%;
		  background-color:#333;
		}
	    ul{
		  list-style-type:none;
		  margin:0;
		  padding:0;
		  overflow:hidden;
		  
		  width:100%;
		}
		li{
		  float:left;
		}
	    li a{
		  display:block;
		  color:white;
		  text-align:center;
		  padding:14px 16px;
		  text-decoration:none;
		}
		li a:hover(.active){
		  background-color:#111;
		  color:white;
		  text-decoration:none;
		}
		.active{
		  background-color:green;
		  width:200px;
		}
		.we{
		  position:relative;
		  display:inline-block;
		}
	    .westory{
		   display: none;
           position: absolute;
           background-color: #f9f9f9;
           min-width: 160px;
           box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
           padding: 12px 16px;
		}
		.we:hover.westory{
		  display:block;
		}
		#baby {
		   width:100px;
		   height:200px;
		   background:#CCC;
		   display:none;
		}
		#main{
		   height:auto;
		   width:100%;
		}
		#middle,#left{
		 float:left;
		}
		#left{
		   width:40%;
		   border-bottom-style:block;
		   }
		#quare {
		   width:200px;
		   height:200px;
		   background:green;
		}  
		   
		}
	  </style>
	  <script>
	    function showHide(){
		  var oDiv=document.getElementById('baby');
		  if(oDiv.style.display=='block'){
		   oDiv.style.display='none';
		  }else{
		   oDiv.style.display='block';
		  }
		}
	    document.getElementById('demo').innerHTML="孤独是一杯美酒"
	    document.write(Date());
		function showDate(){
		  document.write(Date());		  		  
		}
		function shownow(){
		   var x="";
		   var time=new Date().getHours();
		   if(time>1&&time<12){
		      x="good morning";
		   }else if(time>=12&&time<=18){
		     x="good afternoon!";
		   }
		   else{
		      x="good evering";
		   }
		   document.getElementById("shownow").innerHTML=x;
		}
		function showWeekDay(){
		    var x;
		    var d=new Date().getDay();
			switch (d){
  		    case 0:x="今天是星期日";
    	    break;
 		    case 1:x="今天是星期一";
            break;
  		    case 2:x="今天是星期二";
            break;
            case 3:x="今天是星期三";
   	 	    break;
  		    case 4:x="今天是星期四";
    	    break;
  		    case 5:x="今天是星期五";
            break;
  	       	case 6:x="今天是星期六";
    	    break;
 	    }
	    document.getElementById('demo').innerHTML=x;
		}
		function fortest(){
		  var x;
		  var txt="";
		  var person={fname:'youyou',lname:'jj',age:56};
		  for(x in person){
		     txt=txt+" "+person[x];
		  }
		  document.getElementById('demo').innerHTML=txt;
		}
		function setquare(name,value){
		   var oDiv=document.getElementById('quare');
		   oDiv.style[name]=value;
		}
		window.onload=function (){
		  var oBtn1=document.getElementById("btn1");
		  var
		}
	  </script>
    </head>
    <body>
	   <div class="head">
	    <ul id="">
		   <li><a class="active" href="#home">主页</a></li>
		   <li class="we"><a href="#new">我们的故事</a></li>
		   <div class="westory"><p>糖糖专属区</p></div>
		   <li><a href="#contact">我们的照片</a></li>
		   <li><a href="#about">我们的纪念日</a></li>
		</ul>
		</div>
		<div id="main">
		  <div id="left">
		    <ul>
			   <li><input type="button" value="我是一号" onclick=""></li>
			   <li><input type="button" value="我是二号" onclick=""></li>
			   <li><input type="button" value="我是三号" onclick="fortest()"></li>
			   <li><input type="button" value="我是四号" onclick="showWeekDay()"></li>
			   <li><input type="button" value="  love   " onclick="showHide()"></li>
			</ul>
		  </div>
		  <div id="middle">
		    <div id="baby">糖糖，哈哈哈哈哈哈哈哈</div>
		    <p id="demo">你好，我是JavaScript</p>
		    <input type="button" value="变宽" onclick="setquare('width','400px')">
			<input type="button" value="变高" onclick="setquare('height','400px')">
			<input type="button" value="变红" onclick="setquare('background','red')">
			<div id="quare">  </div>
			<input id="but1" type="button" value="全选"/><br>
			<div id="checkbox">
			  <input type="checkbox"/><label>篮球</label><br>
			  <input type="checkbox"/><label>足球</label><br>
		      <input type="checkbox"/><label>网球</label><br>
		   	  <input type="checkbox"/><label>门球</label><br>
			<div>
		  </div>
		
		
		</div>
	</body>
</html>